<template>
	<view class="invoice">
		<gyd-navbar back-color="#fff" :title="title"></gyd-navbar>

		<view class="content">
			<gyd-tabs :list="tabsList" @clickItem="changeTab"></gyd-tabs>
			<view class="list">
				<view class="item" v-for="(item,index) in list" :key="index">
					<view class="base-info">
						<view class="infoitem">
							<view class="label">发票类型:</view>
							<view class="value" v-if="item.invoice.type===1">普票</view>
							<view class="value" v-if="item.invoice.type===2">专票</view>
						</view>
						<view class="infoitem">
							<view class="label">发票抬头：</view>
							<view class="value">{{item.invoice.name}}</view>
						</view>
						<view class="infoitem">
							<view class="label">税号：</view>
							<view class="value">{{item.invoice.duty_number}}</view>
						</view>
						<view v-if="item.invoice.type===2">
							<view class="infoitem">
								<view class="label">银行卡号：</view>
								<view class="value">{{item.invoice.card_number}}</view>
							</view>
							<view class="infoitem">
								<view class="label">开户银行：</view>
								<view class="value">{{item.invoice.bank}}</view>
							</view>
							<view class="infoitem">
								<view class="label">注册电话：</view>
								<view class="value">{{item.invoice.tell}}</view>
							</view>
							<view class="infoitem">
								<view class="label">注册地址：</view>
								<view class="value">{{item.invoice.address}}</view>
							</view>
						</view>
						<view class="infoitem">
							<view class="label">联系电话:</view>
							<view class="value">{{item.invoice.drawer_phone}}</view>
						</view>
						<view class="infoitem">
							<view class="label">开票人邮箱:</view>
							<view class="value">{{item.invoice.email}}</view>
						</view>
						<view class="infoitem">
							<view class="label">开票金额:</view>
							<view class="value price">￥{{item.amount}}</view>
						</view>
						<view class="infoitem">
							<view class="label">申请日期:</view>
							<view class="value">{{item.create_time}}</view>
						</view>
						<view class="infoitem" v-if="item.status===2">
							<view class="label">开票日期:</view>
							<view class="value">{{item.invoice_time}}</view>
						</view>
					</view>
					<view class="btn-group">
						<u-button type="warning" plain size="mini" v-if="item.status===0 || item.status===1"
							@click="notPass(item.id)">不予开票</u-button>
						<u-button type="primary" plain size="mini"
							v-if="authCheck('api/store.invoice/operate') && item.status===0"
							@click="operate('confirm', item.id)">确认开票</u-button>
						<u-button type="primary" plain size="mini"
							v-if="authCheck('api/store.invoice/operate') && item.status===1"
							@click="operate('complete', item.id)">完成开票</u-button>
					</view>
				</view>

				<view class="empty-data" v-if="list.length===0">暂无开票记录</view>
			</view>
		</view>

		<!-- 不予开票原因 -->
		<uni-popup class="show-panel" type="center" ref="invoiceRef">
			<view class="content">
				<view class="show-title">不予开票原因</view>
				<view class="form">
					<view class="form-item">
						<textarea v-model="remark" placeholder="请填写不予开票原因"></textarea>
					</view>
				</view>
			</view>
			<view class="footer">
				<view class="btn-group">
					<u-button type="primary" size="small" plain @click="submit()">提交</u-button>
					<u-button type="defalut" size="small" plain @click="cancel">取消</u-button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		ref,
		reactive,
		toRefs,
		inject,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '发票管理',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		store_id: 0,
		current: 0,
		tabsList: ['全部', '待开票', '开票中', '已开票'],
		isMore: true,
		list: [],
	});

	const invoiceRef = ref(null);

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('id')) {
			console.log('传递参数', opt.id);
		}
		let selStore = cache.get('selStore');
		if (selStore) {
			state.store_id = selStore.id;
		}
		getDataList();
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	})

	onReachBottom(() => {
		console.log('触底加载更多');
	})

	function getDataList() {
		let params = {
			store_id: state.store_id,
			type: state.current,
			skip: state.list.length,
		}
		request.get('store.invoice/list', params).then(res => {
			console.log('发票列表', res);
			state.isMore = res.data.is_more;
			if (state.list.length == 0) {
				state.list = res.data.data;
			} else {
				state.list = state.list.concat(res.data.data);
			}
		})
	}

	function changeTab(index) {
		state.current = index;
		state.isMore = true;
		state.list = [];
		getDataList();
	}

	function notPass(id) {
		state.invoice_id = id;
		invoiceRef.value.open();
	}

	function cancel() {
		state.remark = '';
		invoiceRef.value.close();
	}

	function operate(action, id) {
		let params = {
			id: id,
			action: action,
			remark: state.remark,
		}
		request.post('store.invoice/operate', params).then(res => {
			console.log('发票操作', res);
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
			if (res.code === 1) {
				state.isMore = true;
				state.list = [];
				getDataList();
			}
		})
	}

	function submit() {
		if (!state.remark) {
			uni.showToast({
				title: '请填写不予开票原因',
				icon: 'none'
			})
			return;
		}
		operate('failed', state.invoice_id);
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		store_id,
		current,
		tabsList,
		isMore,
		list,
	} = toRefs(state);
</script>

<style lang="scss">
	.invoice {
		.content {
			.list {
				.item {
					background: #fff;
					padding: $m24;
					border-bottom: #f7f7fb solid 1rpx;

					.base-info {
						.infoitem {
							margin: 0 0 $m12 0;
							display: flex;

							.label {
								width: 160rpx;
								color: $content-color;
							}

							.value {
								flex: 1;
								color: $main-color;

								&.price {
									font-size: $font-36;
									color: $primary-color;
								}
							}
						}
					}

					.btn-group {
						display: flex;
						justify-content: flex-end;

						:deep(.u-button) {
							min-width: 132rpx;
							margin-left: $m20;
						}
					}
				}

				.empty-data {
					margin-bottom: $m24;
					padding: $m24;
					background-color: #fff;
					border-radius: $radius-16;
					text-align: center;
					align-items: center;
					justify-content: center;
				}
			}
		}

		.show-panel {
			background-color: #fff;

			.content {
				padding: $m24;
				width: 560rpx;

				.show-title {
					width: 100%;
					line-height: 50rpx;
					text-align: center;
					font-size: 28rpx;
					font-weight: 800;
					color: #000;
				}

				.form {
					padding: $m24;

					.form-item {
						line-height: 60rpx;
						font-size: 24rpx;
						color: #000;
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						align-items: flex-start;
						justify-content: space-between;

						.label {
							width: 180rpx;
						}

						.value {
							flex: 1;
						}
					}
				}
			}

			.footer {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				padding: $m24 0;
				border-top: 1rpx solid $border-color;

				.btn-group {
					:deep(.u-button) {
						margin-left: $m20;
					}
				}
			}
		}
	}
</style>